// TypingAnimation.tsx
import { defineComponent, ref, watchEffect } from 'vue';

// 打字动画

interface TypingAnimationProps {
  text: string;
  duration?: number;
  className?: string;
}

 const TypingAnimation = defineComponent({
  name: 'TypingAnimation',
  props: {
    text: {
      type: String,
      required: true,
    },
    duration: {
      type: Number,
      default: 200,
    },
    className: {
      type: String,
      default: '',
    },
  },
  setup(props: TypingAnimationProps) {
    const displayedText = ref<string>('');
    const i = ref<number>(0);

    // Update the typing effect using an interval
    watchEffect(() => {
      const typingEffect = setInterval(() => {
        if (i.value < props.text.length) {
          displayedText.value = props.text.substring(0, i.value + 1);
          i.value += 1;
        } else {
          clearInterval(typingEffect);
        }
      }, props.duration);

      return () => clearInterval(typingEffect); // Cleanup interval on component unmount
    });

    return {
      displayedText,
      className: props.className,
    };
  },
  render() {
    return (
      <h1
        class={["font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm", this.className].join(' ')}
      >
        {this.displayedText || this.text}
      </h1>
    );
  },
});

TypingAnimation.displayName = 'TypingAnimation';

export default TypingAnimation;
